<template>
  <div class="container">
    <div class="titlebox">
      <h2 class="title">选购指南</h2>
      <span>一站式解决品类选购难题</span>
    </div>
    <van-tabs
      v-model="active"
      :swipeable="swipeable"
      :ellipsis="ellipsis"
      :swipe-threshold="swipethreshold"
      :animated="animated"
      sticky
      offset-top="0.44rem"
    >
      <van-tab
        v-for="(item, index) in items"
        :title="item"
        :title-style="titlestyle"
      >
        <contenlist :index="index"></contenlist>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";
import contenlist from "./contenlist.vue";

Vue.use(Tab);
Vue.use(Tabs);

export default {
  components: {
    contenlist,
  },
  data() {
    return {
      active: "1",
      titlestyle: "padding-left:0",
    };
  },

  created() {
    this.items = ["数码办公", "家居家装", "运动时尚", "母婴育儿", "日百食品"];
    this.ellipsis = false;
    this.swipeable = true;
    this.swipethreshold = 5;
    this.animated = true;
  },
};
</script>

<style lang='stylus' scoped>
.container
  margin 0 0.1rem
  background-color white
  border-radius 0.1rem
  padding 0 0.17rem
  // width 100%
  // overflow scroll
  .titlebox
    margin-top 0.22rem
    .title
      font-size 0.22rem
      display inline-block
    span
      font-size 0.12rem
      color #979797
      margin-left 0.1rem
  .van-tabs
    width 100%
    margin-top 0
</style>